<template>
	<view>
		<!-- 支付密码 -->
		<view class="payPassBg-Container">
			<view class="setPass-Container">
				<view class="modalTitle">
					请输入支付密码
				</view>

				<!-- 关闭弹窗 -->
				<image @click="$emit('cancel')" src="/static/images/common/closeModal.png" class="closeModalBtn"></image>

				<view @tap="show_key = true" class="content">
					<view class="passwordBg-Container">
						<image class="password-bg" src="/static/images/order/pay/password.png" mode=""></image>
					</view>

					<view v-for="(item, index) in 6" :key="item" class="password-item">
						{{password[index] ? '●' :''}}
					</view>
				</view>

				<view class="forgetPass-Container">
					<navigator url="/pagesUser/payPass" class="forgetPass" hover-class="none">忘记密码？</navigator>
				</view>

				<view class="confirmPayOuter-Container">
					<view @click="confirm" class="confirmPay-Container">
						{{confirmText}}
					</view>
				</view>
			</view>
			<pay-keyboard :show_key="show_key" @hideFun="show_key = false" @getPassword="(e) => password = e"></pay-keyboard>
		</view>
	</view>
</template>

<script>
	import payKeyboard from '@/components/keyboard/keyboard';
	export default {
		props:{
			confirmText: {
				type:String,
				default: '确认提现'
			}
		},
		components: {
			payKeyboard
		},
		data() {
			return {
				password: '',
				show_key: false,
			};
		},
		methods: {
			confirm() {
				if (!this.password) return this.$api.msg('请输入密码')
				if (this.password.length < 6) return this.$api.msg('请输入有效的密码')
				this.$emit('confirm', this.password)
				this.$emit('cancel')
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 支付密码 */
	.payPassBg-Container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);

		/* 设置密码 */
		.setPass-Container {
			width: 600rpx;
			height: 478rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			/* 弹窗标题 */
			.modalTitle {
				margin-top: 50rpx;
				margin-bottom: 75rpx;
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				// font-weight:bold;
				color: rgba(51, 51, 51, 1);
			}

			/* 关闭按钮 */
			.closeModalBtn {
				z-index: 99999;
				position: absolute;
				top: 36rpx;
				right: 36rpx;
				width: 25rpx;
				height: 24rpx;
			}

			.content {
				position: relative;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				width: 100%;
				height: 90rpx;

				.passwordBg-Container {
					display: flex;
					justify-content: center;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 90rpx;

					.password-bg {
						width: 535rpx;
						height: 90rpx;
					}
				}

				.password-item {
					position: relative;
					width: 90rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					font-size: 60rpx;
					font-family: PingFang;
					color: #333333;

					/* &.borderOneRpx:after {
						border-width: 4rpx;
						border-color: rgba(238,238,238,1);
						border-radius: 5rpx;
					} */
				}
			}


			/* 忘记密码 */
			.forgetPass-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				margin-top: 40upx;
				margin-bottom: 40upx;
				.forgetPass {
					width: 544rpx;
					height: 40rpx;
					line-height: 70rpx;
					text-align: right;
					font-size: 20rpx;
					font-family: PingFang SC;
					color: #FE5E49;
					line-height: 40rpx;
				}
			}

			/* 确认支付 */
			.confirmPayOuter-Container {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 70rpx;

				.confirmPay-Container {
					width: 544rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					/* font-weight:500; */
					color: rgba(255, 255, 255, 1);
					background: #FE5E49;
					border-radius: 35rpx;
				}
			}
		}
	}
</style>
